<template>
  <div class="column-detail-page mx-auto">
    <div class="column-info row mb-4 border-bottom pb-4 align-items-center" v-if="column">
      <div class="col-2 text-center">
        <img :src="column.avatar && column.avatar.fitUrl" :alt="column.title" class="rounded-circle border w-100">
      </div>
      <div class="col-10">
        <h4>{{column.title}}</h4>
        <p class="text-muted">{{column.description}}</p>
      </div>
    </div>
    <PostList :list="list"></PostList>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import PostList from '../components/PostList.vue'
import { ColumnProps } from '../store'
import { generateFitUrl } from '../helper'

const store = useStore()
const route = useRoute()
const currentId = route.params.id

const column = computed(() => {
  const selectColumn = store.getters.getColumnById(currentId) as ColumnProps | undefined
  if (selectColumn) {
    generateFitUrl(selectColumn, 100, 100)
  }
  return selectColumn
})
const list = computed(() => store.getters.getPostsByCid(currentId))
onMounted(() => {
  store.dispatch('fetchColumn', currentId)
  store.dispatch('fetchPosts', currentId)
})
</script>